<template>
  <div class="clearfix">
    <okUploadImage :fileList="value" v-bind="bindProps" :update="handleUpdate" :theme="appTheme" :formatUploadData="formatUploadData" :customRemovePromise="customRemovePromise" :customDisplayList="customDisplayList"></okUploadImage>
  </div>
</template>

<script lang="ts" setup>
  import { ref, reactive, computed, inject, unref } from 'vue';
  import { propTypes } from '/@/utils/propTypes';
  import { useAttrs } from '/@/hooks/core/useAttrs';
  import { uploadFileUrl } from '/@/api/common/api';
  import { okUploadImage } from '@byteluck/ok-wc-ui';
  import { useFile } from '../hooks/useFile';
  

  const appTheme = inject('appTheme');
  const attrs = useAttrs();
  const emit = defineEmits(['change', 'update:value']);
  const props = defineProps({
    //绑定值
    value: propTypes.oneOfType([propTypes.string, propTypes.array]),
    //按钮文本
    // listType: {
    //   type: String,
    //   required: false,
    //   default: 'picture-card',
    // },
    //按钮文本
    text: {
      type: String,
      required: false,
      default: '上传',
    },
    //这个属性用于控制文件上传的业务路径
    bizPath: {
      type: String,
      required: false,
      default: '',
    },
    //是否禁用
    disabled: {
      type: Boolean,
      required: false,
      default: false,
    },
    //上传数量
    fileMax: {
      type: Number,
      required: false,
    },
  });

  const { formatUploadData, handleUpdate, customRemovePromise, customDisplayList, generateDir } = useFile(emit, 'image');

  // 合并 props 和 attrs
  const bindProps = computed(() => {
    //update-begin-author:liusq date:20220411 for: [issue/455]上传组件传入accept限制上传文件类型无效
    const bind: any = Object.assign({}, props, unref(attrs));
    //update-end-author:liusq date:20220411 for: [issue/455]上传组件传入accept限制上传文件类型无效

    bind.name = 'file';
    bind.class = [bind.class, { 'upload-disabled': props.disabled }];
    bind.data = {dir: generateDir()}

    bind.accept = 'image/*';
    bind.multiple = props['fileMax'] && (props['fileMax'] > 1 || props['fileMax'] === 0);

    let operation = ['preview', 'download', 'remove'];
    bind.operation = operation;
    bind.action = uploadFileUrl
    return bind;
  });

  
  
</script>

<style lang="less">
  
</style>
